import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper'
import 'swiper/css';
import 'swiper/css/pagination'
import { Badge } from 'antd'

const FodderSwiper = (props) => {
  const { data } = props
  console.log(data)
  return (
    <Swiper
      modules={[Pagination]}
      pagination={{ clickable: true }}
      // loop="true"
    >
      {
        data.map((item) => (
          <SwiperSlide key={item.bannerid}>
            <Badge.Ribbon text={item.flag ? '展示' : '不展示'} color={item.flag ? 'green' : 'red'} style={{ right: '0.25%' }}>
              <img style={{ width: '99%' }} src={item.img} alt={item.alt} />
            </Badge.Ribbon>
          </SwiperSlide>
        ))
      }
    </Swiper>
  )
}

export default FodderSwiper
